<template>
  <a-modal
    :visible="props.visible"
    title="修改密码"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="formExpertRef"
      class="form"
      :model="formState"
      name="basic"
      :label-col="{ span: 24 }"
      :wrapper-col="{ span: 24 }"
      autocomplete="off"
      @finish="applyTest"
    >
      <a-form-item name="code" style="width: 0; height: 0; overflow: hidden; margin-bottom: 0">
        <a-input placeholder="验证码" class="default-height" auto-complete="new-password">
          <template #prefix>
            <img src="@\assets\xxxhdpi\code-icon.png" width="16" height="16" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item
        name="phonpassworde1"
        style="width: 0; height: 0; overflow: hidden; margin-bottom: 0"
      >
        <a-input-password placeholder="新密码" auto-complete="new-password" class="default-height">
        </a-input-password>
      </a-form-item>
      <a-form-item
        name="phone"
        label="手机号"
        :rules="[{ validator: phoneValidate, trigger: ['blur'] }]"
      >
        <a-input
          v-model:value="formState.phone"
          disabled
          placeholder="手机号"
          class="default-height"
        >
          <!-- <template #prefix>
            <img src="@\assets\xxxhdpi\name-icon.png" width="16" height="16" />
          </template> -->
        </a-input>
      </a-form-item>
      <a-form-item
        name="code"
        label="验证码"
        :rules="[{ required: true, message: '请输入验证码' }]"
      >
        <a-input
          v-model:value="formState.code"
          placeholder="验证码"
          class="default-height"
          style="width: 350px"
        >
          <!-- <template #prefix>
            <img src="@\assets\xxxhdpi\code-icon.png" width="16" height="16" />
          </template> -->
        </a-input>
        <a-button
          class="getCode default-height ml16"
          :disabled="codeState.codeDisabled"
          :class="{ getCodeDisable: codeState.codeDisabled }"
          @click="getCode"
          >{{ codeState.codeDisabled ? '(' + codeState.time + ')' : '获取验证码' }}</a-button
        >
      </a-form-item>
      <a-form-item
        name="password"
        label="新密码"
        :rules="[{ required: true, validator: passWordValidate }]"
      >
        <a-input-password
          v-model:value="formState.password"
          placeholder="新密码"
          class="default-height"
        >
          <!-- <template #prefix>
            <img src="@\assets\xxxhdpi\passWord-icon.png" width="16" height="16" />
          </template> -->
        </a-input-password>
      </a-form-item>
      <a-form-item
        name="confirmPassword"
        label="再次确认"
        :rules="[{ required: true, validator: passWordConfirmValidate }]"
      >
        <a-input-password
          v-model:value="formState.confirmPassword"
          placeholder="再次确认"
          class="default-height"
        >
          <!-- <template #prefix>
            <img src="@\assets\xxxhdpi\passWord-icon.png" width="16" height="16" />
          </template> -->
        </a-input-password>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { usePassword } from '@/hook/usePassword'
interface Props {
  visible: boolean
  phone: string
}
const props = withDefaults(defineProps<Props>(), {
  visible: true,
  phone: ''
})

const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
}>()
const {
  formState,
  codeState,
  phoneValidate,
  passWordValidate,
  passWordConfirmValidate,
  getCode,
  applyTest
} = usePassword({ callback: () => emit('update:visible', false) })

const visible = ref(false)
const confirmLoading = ref(false)
const editNewName = ref('')
const formExpertRef = ref()

const handleOk = () => {
  formExpertRef.value
    .validate()
    .then(() => {
      console.warn(123)
      applyTest()
    })
    .catch((err: Error) => {
      console.log(err)
    })
}

const handleCancel = () => {
  formExpertRef.value.resetFields()
  emit('update:visible', false)
}

watch(
  () => props.phone,
  (val) => {
    formState.phone = val
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped></style>
